<template>
  <el-card class="container">
    <el-row type="flex" justify="space-between" class="mb10">
      <el-col>
        <el-button size="small" @click="handleBack">返回上一页</el-button>
        <span style="font-weight: bold; margin-left: 10px">{{ title }}</span>
      </el-col>
      <div>
        <el-button type="primary" size="mini" @click="handleSubmit"
          >提交</el-button
        >
      </div>
    </el-row>
    <div class="content">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="160px"
        size="small"
      >
        <el-card
          header="客户信息"
          :borderd="false"
          shadow="never"
          :body-style="{ padding: 20 }"
          class="mb10"
        >
          <el-row>
            <el-col :span="12">
              <!-- <el-form-item label="抵顶客户" prop="obj">
              <el-select v-model="form.obj" style="width: 100%">
                <el-option v-for="item in 10" :label="item">{{
                  item
                }}</el-option>
              </el-select>
            </el-form-item> -->
              <div slot="header" class="clearfix">
                <span>供应商</span>
              </div>
              <el-form-item
                label="客户名称"
                :rules="[
                  {
                    required: true,
                    message: '请选择客户名称',
                    trigger: 'change',
                  },
                ]"
                prop="customerUserId"
              >
                <div style="display: flex; gap: 20px; align-items: center">
                  <span v-if="form.customUserName">{{
                    form.customUserName
                  }}</span>
                  <span v-if="form.customerType">
                    <span style="color: #606266; font-weight: bold"
                      >客户类型：</span
                    >
                    <span v-if="form.customerType == 3">企业</span>
                    <span v-if="form.customerType == 4">个人</span>
                  </span>
                  <span v-if="form.customerUserId"
                    ><span style="color: #606266; font-weight: bold"
                      >客户ID：</span
                    >
                    {{ form.customerUserId }}</span
                  >
                  <el-button type="text" @click.native="handleSelectName">{{
                    form.customUserName ? "请重新选择" : "请选择"
                  }}</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商ID">数据</el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card
          header="原材料信息"
          :borderd="false"
          shadow="never"
          :body-style="{ padding: 20 }"
          class="mb10"
        >
          <div class="origin_add_info">
            <el-button @click.native="handleSelectName">添加</el-button>
          </div>
          <el-table :data="originData">
            <el-table-column label="原材料名称" align="center" prop="ctime" />
            <el-table-column label="规格" align="center" prop="orderId" />
            <el-table-column label="单价" align="center" prop="partsName" />
            <el-table-column
              label="采购数量"
              align="center"
              prop="partsName2"
            />
            <el-table-column label="扣咋(%)" align="center" prop="partsName3" />
            <el-table-column
              width="190px"
              fixed="right"
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handelDelete(scope.row)"
                  v-hasPermi="['system:designator:remove']"
                  >删除</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleSetFreight(scope.row)"
                  v-hasPermi="['system:designator:edit']"
                  >运费</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card header="合同信息">
          <el-row>
            <el-col :span="10">
              <el-form-item label="合同类型" prop="resource">
                <el-radio-group v-model="form.resource">
                  <el-radio label="正式合同" value="正式合同"></el-radio>
                  <el-radio label="临时合同" value="临时合同"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="是否有抵顶" prop="resource">
                <el-radio-group v-model="form.resource">
                  <el-radio label="是" value="是"></el-radio>
                  <el-radio label="否" value="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同起止日期" prop="createTime">
                <QuickFilterDate
                  :disableArr="[1, 2, 3, 4, 5, 6, 7]"
                  v-model="queryDateArr"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="原材料结算付款率" prop="materialsPayRate">
                <el-input
                  type="number"
                  style="width: 150px"
                  placeholder="请输入"
                  v-model="form.materialsPayRate"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="运费结算付款率" prop="carriagePayRate">
                <el-input
                  type="number"
                  style="width: 150px"
                  placeholder="请输入"
                  v-model="form.carriagePayRate"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="违约责任" prop="breachLiability">
                <el-input
                  style="width: 850px"
                  placeholder="请输入"
                  v-model="form.breachLiability"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同附件" prop="fileUrls">
                <file-upload
                  :isShowTip="false"
                  v-model="form.fileUrls"
                  :fileType="['png', 'jpg', 'jpeg']"
                ></file-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card header="其他信息" class="mt10" v-if="form.id">
          <el-row>
            <el-col :span="12">
              <el-form-item label="抵顶物ID">{{ form.id }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抵入状态">{{
                form.statusDesc
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后编辑时间">{{ form.mtime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后编辑人">{{
                form.modifyUsername
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>

    <SelectCustomDialog
      :dialogVisible="dialogVisible"
      :multiple="false"
      @onClose="dialogVisible = false"
      @onSubmit="handleOnSubmit"
    ></SelectCustomDialog>
    <SelectContractDialog
      :dialogVisible="contraVisible"
      :multiple="false"
      @onClose="contraVisible = false"
      @onSubmit="handleContracSubmit"
    ></SelectContractDialog>
    <set-freight ref="setfreight"></set-freight>
  </el-card>
</template>

<script>
import SelectCustomDialog from "./components/SelectCustomDialog";
import SelectContractDialog from "./components/SelectContractDialog";
import setFreight from "./components/set-freight.vue";
import QuickFilterDate from "@/components/QuickFilterDate";
import { listUser } from "@/api/system/user";
import {
  updateOrders,
  getOrders,
  addOrders,
  // addRepair,
  // updateRepair,
} from "@/api/service/arrive/enter.js";
export default {
  components: {
    SelectCustomDialog,
    SelectContractDialog,
    setFreight,
    QuickFilterDate,
  },
  data() {
    return {
      dialogVisible: false,
      contraVisible: false,
      originData: [
        {
          ctime: "1",
          orderId: "2",
          partsName: "2",
          partsName2: "2",
          partsName3: "2",
        },
      ],
      allUser: [],
      form: {
        obj: null,
        type: 1,
        name: null,
        contractMaterialList:[],
        materialsPayRate: null,
        carriagePayRate: null,
        breachLiability: null,
        fileUrls: null,
        offsetType: null,
        type: null,
        contractId: null,
        customerUserId: null,
      },
      offsetType: [
        { title: "清欠", value: "0" },
        { title: "合同约定", value: "1" },
      ],
      rules: {
        obj: [
          {
            required: true,
            message: "抵给对象是必填项",
            trigger: "blur,change",
          },
        ],
        name: [
          {
            required: true,
            message: "抵顶物是必填项",
            trigger: "blur,change",
          },
        ],
        materialsPayRate: [
          {
            required: true,
            message: "原材料结算付款率是必填的",
            trigger: "blur,change",
          },
        ],
        carriagePayRate: [
          {
            required: true,
            message: "运费结算付款率是必填的",
            trigger: "blur,change",
          },
        ],
        fileUrls: [
          {
            required: true,
            message: "合同附件是必填项",
            trigger: "blur,change",
          },
        ],
        offsetType: [
          {
            required: true,
            message: "业务类型是必填项",
            trigger: "blur,change",
          },
        ],
        type: [
          {
            required: true,
            message: "抵顶物类型是必填项",
            trigger: "blur,change",
          },
        ],
        contractId: [
          {
            required: true,
            message: "请选择关联合同",
            trigger: "blur,change",
          },
        ],
        customerUserId: [
          {
            required: true,
            message: "请选择客户名称",
            trigger: "blur,change",
          },
        ],
      },
    };
  },
  created() {
    this.getAllUserList();
    this.userId = this.$route.query.id;
    if (this.userId) {
      this.getUserInfo(this.userId);
    }
  },
  computed: {
    title() {
      return !this.$route?.query?.id ? "新增采购合同" : "修改采购合同";
    },
    queryDateArr: {
      get() {
        if (this.queryParams?.startTime) {
          return [this.queryParams?.startTime, this.queryParams?.endTime];
        }
        return [];
      },
      set(value) {
        this.queryParams.startTime = value[0];
        this.queryParams.endTime = value[1];
      },
    },
  },
  methods: {
    getUserInfo(userId) {
      if (userId) {
        getOrders(userId).then((response) => {
          console.log("11123", response);
          this.form = {
            ...this.form,
            ...response.data,
          };
          this.form.offsetType = this.form.offsetTypeList;
          this.form.type = this.form.type + "";
        });
      }
    },
    getAllUserList() {
      listUser({ pageNum: 1, pageSize: 10000 }).then((res) => {
        this.allUser = res.rows.map((item) => ({
          ...item,
          label: item.nickName,
          value: item.userId,
        }));
      });
    },
    handleBack() {
      this.$router.push({
        path: "/purchase/contract/index",
      });
    },
    // 选择客户-弹框展示
    handleSelectName() {
      this.dialogVisible = true;
    },
    // 删除
    handelDelete(obj) {},
    // 运费
    handleSetFreight(obj) {
      this.$refs.setfreight.handelInit(obj);
    },
    // 选择客户
    handleOnSubmit(row) {
      this.form.customerUserId = row.userInfoId;
      // this.form.supplierName = row.name;
      this.form.customerType = row.userProperty;
    },
    // 选择合同-弹框展示
    handleSelectContract() {
      this.contraVisible = true;
    },
    // 选择合同
    handleContracSubmit(row) {
      this.form.contractId = row.id;
      this.form.projectNo = row.projectNo;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.id) {
            updateOrders({
              ...this.form,
            }).then((res) => {
              this.$message.success("更新成功");
              this.$router.push({ path: "/purchase/contract/index" });
            });
          } else {
            addOrders({
              ...this.form,
            }).then((res) => {
              this.$message.success("新增成功");
              this.$router.push({ path: "/purchase/contract/index" });
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.origin_add_info {
  display: flex;
  justify-content: end;
  align-items: end;
  padding-bottom: 10px;
}
.container {
  height: 100%;
  ::v-deep.el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
